<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <title>修改信息页面</title>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
</head>
<body style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" href="#">个人信息</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" th:href="@{/blog/intoMain}">返回</a>
                </li>
            </ul>
            <form class="d-flex me-5 col-2" role="search">
                <span style="font-size: 20px; font-family:'微软雅黑" class="me-2"
                      th:text="${username}">${username}</span>
                <img th:src="|@{/images/}${session.pic}|" alt="touxiang" width="50" height="50"
                     style="border-radius: 50px" class="img-fluid">
            </form>
        </div>
    </div>
</nav>


<div class="container mt-3">

    <div class="row mt-2 border   bg-body-tertiary"
         style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);">
        <label class="row ms-5 form-label mt-2 fw-bolder" style="font-family: '微软雅黑'">修改头像</label>
        <div class="container d-flex justify-content-center">
            <img th:src="|@{/images/}${session.pic}|"
                 style="border-radius: 50px ; width: 100px;height: 100px;" class="img-fluid mx-auto"/></div>

        <form th:action="@{/blog/updatePic}" method="post" enctype="multipart/form-data"
              class="d-flex justify-content-center row align-items-center">
            <div class=" col-6 d-flex justify-content-center">
                <input class="form-control" type="file" name="photo" style="width: 250px;">
            </div>
            <hr/>
            <div class=" col-6 mb-1 ">
                <!-- <input  type="submit" value="确定"/> -->
                <button type="submit" class="btn btn-outline-success" style="width: 250px;">确定</button>
            </div>
        </form>
    </div>
    <div class="row mt-5 d-flex border bg-body-tertiary"
         style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);">
        <div class="ms-3 form-label mt-2 fw-bolder" style="font-family: '微软雅黑'">修改信息</div>
        <div class="row mt-2" th:text="${infoErro}"></div>

        <!--        此处如何加载个人信息对象-->
        <!--        todo 需要修改form标签库的东西-->
        <form th:action="@{/blog/changeInfo}" method="post" th:object="${cUser}" class="row g-3">
            <div class="col-md-6">
                <label for="inputName" class="form-label">Username</label>
                <input th:field="*{username}" type="text" class="form-control" id="inputName"/>
            </div>
            <div class="col-md-6">
                <label for="inputPassword4" class="form-label">Password</label>
                <input th:field="*{userpassword}" type="password" class="form-control" id="inputPassword4"/>
            </div>
            <div class="col-12">
                <label for="inputMotto" class="form-label">Motto</label>
                <input th:field="*{content}" type="text" class="form-control" id="inputMotto"/>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-success">提交</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>
